<style lang="scss" scoped>
#cmain {
    .rare-list {
        height: auto;
        background: #ffffff;
        border-radius: 10px;
        padding: 20px;
        padding-bottom: 50px;
        box-shadow: 0 0 10px 0 #cfcfcf;
        .rare-list-header {
            padding:0 10px;
            .right {
                float: right;
                width: 59%;
            }
        }
        /*表格*/
        .rare-list-table {
            position: relative;
            margin-top: 20px;
            padding: 10px;
            min-height: 80px;
            _height: 80px;
            .disabled {
                color: #ccc;
            }
            .el-table {
                min-height: 450px;
            }
        }
        .fileClass {
            width: 22px;
            height: 26px;
            display: inline-block;
            position: relative;
            margin-right: 7px;
            margin-left: 7px;
            margin-top: 10px;
        }
        .posBg {
            position: absolute;
            right: -4px;
            bottom: -4px;
            display: inline-block;
            width: 13px;
            height: 13px;
        }
        .f {
            background: url("/static/icon/file.png") no-repeat left top;
        }
        .fFail {
            background: url("/static/icon/file.png") no-repeat -23px 0px;
        }
        .b {
            background: url("/static/icon/file.png") no-repeat 0px -26px;
        }
        .bFail {
            background: url("/static/icon/file.png") no-repeat -23px -26px;
        }
        .v {
            background: url("/static/icon/file.png") no-repeat 0px -52px;
        }
        .vFail {
            background: url("/static/icon/file.png") no-repeat -23px -52px;
        }
        .c {
            background: url("/static/icon/file.png") no-repeat 0px -78px;
        }
        .cFail {
            background: url("/static/icon/file.png") no-repeat -23px -78px;
        }
        .s {
            background: url("/static/icon/file.png") no-repeat 0px -104px;
        }
        .sFail {
            background: url("/static/icon/file.png") no-repeat -23px -104px;
        }
        .upFail {
            background: url("/static/icon/status.png") no-repeat -26px 0px;
        }
        .anySuccess {
            background: url("/static/icon/status.png") no-repeat 0px 0px;
        }
        .anyLaoding {
            background: url("/static/icon/status.png") no-repeat -39px 0px;
        }
        .anyFail {
            background: url("/static/icon/status.png") no-repeat -13px 0px;
        }
        /*分页*/
        .pageation {
            height: 32px;
            line-height: 32px;
            margin-top: 20px;
        }
    }
    .rare-count {
        margin-top: 30px;
        height: 400px;
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px 0 #cfcfcf;
        .title {
            font-weight: 500;
            height: 53px;
            line-height: 53px;
            color: #2b3245;
            font-size: 16px;
            padding-left: 30px;
            border-bottom: 1px solid #dcdfe6;
        }
        .echart-content { 
            height: 347px;
            padding: 14px 30px 40px 30px;
            .ivu-row {
                height: 100%;
                .echart-title {
                    height: 23px;
                    line-height: 23px;
                    color: #666;
                    font-size: 16px;
                    margin-bottom: 10px;
                }
                .canvasCol {
                    border: 1px solid #dcdfe6;
                    height: 270px;
                    position: relative;
                }
                .ivu-col {
                    height: 100%;
                }
                .cline {
                    text-align: center;
                    height: 100%;
                    margin-top: 33px;
                    span {
                        width: 1px;
                        height: 270px;
                        display: inline-block;
                        background: #dcdfe6;
                    }
                }
            }
        }
    }
    .underline {
        text-decoration: underline;
    }
    .Ul {
        width: 200px;
        height: 100px;
        border: 1px solid #ccc;
    }
}
</style>

<template>
    <div id="cmain">
        <!--表格区域-->
        <div class="rare-list">
            <!--头部创建按钮及搜索-->
            <div class="rare-list-header">
                <Dropdown @on-click="addData">
                    <Button type="primary">新建数据</Button>
                    <DropdownMenu slot="list">
                        <DropdownItem name='single'>单个数据</DropdownItem>
                        <DropdownItem name='all'>批量数据</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
                <Button type="primary" style="margin-left:10px;" @click.prevent="allocationData">分配数据</Button>
                <div style="float:right;width:446px;">
                    <Select v-model="searchColumn" style="width:140px;" placeholder="请选择查询字段" @on-change="getSearchColumn">
                        <Option v-for="item in searchColumnList" :value="item.value" :key="item.value" style="text-align:center;letter-spacing:1px;">{{ item.label }}</Option>
                    </Select>
                    <Input style="width:300px;" placeholder="请输入" class="right" v-model="keyword">
                    <Button slot="append" icon="ios-search" @click='search'></Button>
                    </Input>
                </div>

            </div>
            <!--表格显示-->
            <div class="rare-list-table">
                <el-table v-if="!isWarn" v-loading="loading" element-loading-text="数据加载中，请稍后" :data="rareList" ref="rarelist" border style="width:100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" :width="labelWidth">
                    </el-table-column>
                    <el-table-column label="病人编号">
                        <template slot-scope="scope">
                            <a href="javascript:;" @click="editPatient(scope.row)" style="line-height:45px;">{{scope.row.patientcode}}</a>
                        </template>
                    </el-table-column>
                    <el-table-column label="样本编号">
                        <template slot-scope="scope">
                            <a href="javascript:;" @click="sampleClick(list)" v-if='scope.row.sampleModelList!=null && list!=null' v-for="list in scope.row.sampleModelList" :key="list.sampleid" style='display:block;height:45px;line-height:45px;'>{{list.samplecode}}</a>
                        </template>
                    </el-table-column>
                    <el-table-column label="亲属关系">
                        <template slot-scope="scope">
                            <div v-if='scope.row.sampleModelList!=null && list!=null' v-for="list in scope.row.sampleModelList" :key="list.sampleid" style="height:45px;line-height:45px;">{{list.designator}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="文件状态" align="center" :width="labelWidth">
                        <template slot-scope="scope">
                            <div v-if='scope.row.sampleModelList==null' style='text-align:center;'>----</div>
                            <div v-else v-for="list in scope.row.sampleModelList" :key="list.sampleid" style="height:45px;line-height:45px;">
                                <span v-if='list.fastqjob==0 && list.bamjob==0 && list.vcfjob==0 && list.cnvjob==0 && list.svjob==0' style='text-align:center;'>----</span>
                                <div v-else style="text-align:left;">
                                    <!--fastq未上传-->
                                    <!-- <span v-if='list.fastqjob==0' class="fileClass">--</span> -->
                                    <!-- fastq上传失败 -->
                                    <!-- <span :title="setTitle(list.fastqjob)" v-else-if="list.fastqjob==1" class="fileClass fFail">
                                                                                                  <span :class="setStatusClass(list.fastqjob)"></span>
                                                                                              </span> -->
                                    <!-- fastq其它状态 -->
                                    <span :title="setTitle(list.fastqjob)" v-if='list.fastqjob!=0' class="fileClass f">
                                        <span :class="setStatusClass(list.fastqjob)"></span>
                                    </span>

                                    <!--bam未上传-->
                                    <!-- <span v-if='list.bamjob==0' class="fileClass">--</span> -->
                                    <!-- bam上传失败 -->
                                    <!-- <span :title="setTitle(list.bamjob)" v-else-if="list.bamjob==1" class="fileClass bFail">
                                                                                                  <span :class="setStatusClass(list.bamjob)"></span>
                                                                                              </span> -->
                                    <!-- bam其它状态 -->
                                    <span :title="setTitle(list.bamjob)" v-if='list.bamjob!=0' class="fileClass b">
                                        <span :class="setStatusClass(list.bamjob)"></span>
                                    </span>

                                    <!--vcf未上传-->
                                    <!-- <span v-if='list.vcfjob==0' class="fileClass">--</span> -->
                                    <!-- vcf上传失败 -->
                                    <!-- <span :title="setTitle(list.vcfjob)" v-else-if="list.vcfjob==1" class="fileClass vFail">
                                                                                                  <span :class="setStatusClass(list.vcfjob)"></span>
                                                                                              </span> -->
                                    <!-- vcf其它状态 -->
                                    <span :title="setTitle(list.vcfjob)" v-if='list.vcfjob!=0' class="fileClass v">
                                        <span :class="setStatusClass(list.vcfjob)"></span>
                                    </span>

                                    <!--cnv未上传-->
                                    <!-- <span v-if='list.cnvjob==0' class="fileClass">--</span> -->
                                    <!-- cnv上传失败 -->
                                    <!-- <span :title="setTitle(list.cnvjob)" v-else-if="list.cnvjob==1" class="fileClass cFail">
                                                                                                  <span :class="setStatusClass(list.cnvjob)"></span>
                                                                                              </span> -->
                                    <!-- cnv其它状态 -->
                                    <span :title="setTitle(list.cnvjob)" v-if='list.cnvjob!=0' class="fileClass c">
                                        <span :class="setStatusClass(list.cnvjob)"></span>
                                    </span>

                                    <!--svj未上传-->
                                    <!-- <span v-if='list.svjob==0' class="fileClass">--</span> -->
                                    <!-- svj上传失败 -->
                                    <!-- <span :title="setTitle(list.svjob)" v-else-if="list.svjob==1" class="fileClass sFail">
                                                                                                  <span :class="setStatusClass(list.svjob)"></span>
                                                                                              </span> -->
                                    <!-- svj其它状态 -->
                                    <span :title="setTitle(list.svjob)" v-if='list.svjob!=0' class="fileClass">
                                        <span :class="setStatusClass(list.svjob)"></span>
                                    </span>

                                </div>
                            </div>

                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="分析">
              <template slot-scope="scope">
                  <a href='javascript:;' @click='unscrambleEvent(scope.row)'>分析</a>
              </template>
          </el-table-column> -->
                    <el-table-column label="查看分析结果">
                        <template slot-scope="scope">
                            <a href='javascript:;' @click='viewResult(scope.row)'>查看分析结果</a>
                        </template>
                    </el-table-column>
                    <el-table-column label="查看报告">
                        <template slot-scope="scope">
                            <Button type="primary" @click="viewReport(scope.row)">报告预览</Button>
                        </template>
                    </el-table-column>
                    <div slot="empty"></div>
                </el-table>
                <div v-if='emptyShow' class='empty'>
                    <img style="display:block;float:left;" src="/static/icon/add.png" />
                    <span style="display:block;float:left;margin-top:3px;margin-left:10px;">暂无数据，请创建</span>
                </div>
                <warn v-if="isWarn" @callback="getRareList"></warn>
            </div>
            <div v-if="!isWarn" class="pageation">
                <el-pagination style="float:left;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10, 20, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
                <div style="font-size:13px;color:#606266;float:left;padding:1px 5px;"> 共 {{sampleCount}} 个样本</div>
            </div>
            <!-- 选择分配-弹窗 -->
            <el-dialog title="分配数据" :visible.sync="allocationDataStatus">
                <el-table :data="getAllUsers" ref="getAllUsers" style="width: 100%" height="320" border @selection-change="DialoghandleSelectionChange">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名">
                    </el-table-column>
                </el-table>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancelAllocatin">取 消</el-button>
                    <el-button type="primary" @click="sureAllocationData">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <!--echart图表统计区域-->
        <div class="rare-count">
            <p class="title">图表统计</p>
            <div class="echart-content">
                <Row>
                    <Col span="11">
                    <p class="echart-title">样本数统计</p>
                    <!-- <div v-if='barDatanone'><img src='../../../static/icon/other.png'></div> -->
                    <div id="sampleCount" class="canvasCol">
                        <warn v-if="isShowBarWarn" @callback="getStatistics(1)"></warn>
                    </div>
                    </Col>
                    <Col class="cline" span="2">
                    <span></span>
                    </Col>
                    <Col span="11">
                    <p class="echart-title">报告数统计</p>
                    <!-- <div v-if='pieDatanone'><img src='../../../static/icon/other.png'></div> -->
                    <div id="reportCount" class="canvasCol">
                        <warn v-if="isShowPieWarn" @callback="reportchart"></warn>
                    </div>
                    </Col>
                </Row>
            </div>
        </div>
        <div v-if="sampleFileShow" class='sampleFile'>
            <sample-file :message='fileState' @modalshowEvent='modalFileShow()'></sample-file>
        </div>
    </div>
</template>
<script>
//echats图表
import echarts from "echarts";
//引入登录方法
import { data, login } from "api/index.js";
import { setCookie, getCookie, delCookie } from "@/common/js/cookie.js";
import sampleFile from "@/components/sampleFile.vue";
import warn from "@/components/warn.vue";
Vue.prototype.$echarts = echarts;
export default {
    name: "rare",
    data() {
        return {
            sampleFileShow: false, //样本文件信息展示
            isWarn: false,
            emptyShow: false,
            isShowBarWarn: false,
            isShowPieWarn: false,
            fileState: {},
            labelWidth: 60, //文件状态栏宽度
            keyword: "",
            keywords: "",
            searchColumn: "patientcode", //查询字段
            searchColumnList: [
                //查询字段集合
                {
                    label: "病人编号",
                    value: "patientcode"
                },
                {
                    label: "样本编号",
                    value: "samplecode"
                }
            ],
            rareList: [],
            sampleCount: 0, //样本总数
            total: 100, //数据总数
            currentPage: 1, //当前页数
            pageSize: 5, //每页多少条,
            loading: true, //表格loading
            barDatanone: true,
            pieDatanone: true,
            BarData: [],
            PieData: [
                // {value: 335, name: '阴性报告数' },
                // { value: 310, name: '阳性报告数' },
                // { value: 234, name: '未出报告数' },
            ],
            myPieChart: "",
            myBarChart: "",
            //分配数据-选择的病人
            multipleSelection: [],
            //分配数据-选择的用户
            DialogmultipleSelection: [],
            //分配数据-获取的用户
            getAllUsers: [],
            //分配弹窗显示表示
            allocationDataStatus: false,
            //一共多少用户
            DialogTotal: null
        };
    },

    components: {
        sampleFile,
        warn
    },
    //    mounted() {
    //   this.list = this.states.map(item => {
    //     return { value: item, label: item };
    //   });
    // },
    methods: {
        // //分配数据-选择的病人
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //分配数据选中的用户
        DialoghandleSelectionChange(val) {
            this.DialogmultipleSelection = val;
        },
        //选择分配-弹出选择窗口
        async allocationData() {
            if (this.multipleSelection <= 0) {
                this.$Message.error("至少选择一名病人");
                return;
            }
            await this.getAllUser();
            this.allocationDataStatus = true;
        },
        // 获取用户方法
        getAllUser() {
            let _this = this;
            let obj = {
                userId: getCookie("userid"),
                productId: this.$store.state.productId,
                pageSize: 100,
                pageIndex: 1
            };
            data.getAllUser(obj).then(function(res) {
                if (res.returnCode == 200) {
                    _this.getAllUsers = res.data.userList;
                    _this.DialogTotal = res.data.count;
                } else {
                    _this.$Message.error("获取用户信息失败");
                }
            });
        },
        //确定分配
        sureAllocationData() {
            let _this = this;
            //取出patientid
            let arr = this.multipleSelection.map(function(ele) {
                return ele.patientid;
            });
            //取出ele.userid
            let arr1 = this.DialogmultipleSelection.map(function(ele) {
                return ele.userid;
            });
            if (arr1 <= 0) {
                this.$Message.error("至少选择一名用户");
                return;
            }
            let obj = {
                patientidList: [...new Set(arr)], //去重
                useridList: [...new Set(arr1)] //去重
            };
            data.allocationData(obj).then(function(res) {
                console.log(res);
                if (res.returnCode == 0) {
                    _this.$Message.success("分配数据" + res.msg);
                    _this.$refs.rarelist.clearSelection();
                    _this.$refs.getAllUsers.clearSelection();
                    _this.multipleSelection = [];
                    _this.DialogmultipleSelection = [];
                } else {
                    _this.$Message.error("分配数据" + res.msg);
                }
                _this.allocationDataStatus = false;
            });
        },
        //取消分配
        cancelAllocatin() {
            this.$refs.rarelist.clearSelection();
            this.$refs.getAllUsers.clearSelection();
            this.multipleSelection = [];
            this.DialogmultipleSelection = [];
            this.allocationDataStatus = false;
        },
        openFullScreen2() {},
        //关闭弹层
        modalFileShow() {
            this.sampleFileShow = false;
        },
        //点击病人编号
        sampleClick(row) {
            console.log(row)
            this.sampleFileShow = true;
            this.fileState = row;
        },
        reportchart() {
            var _this = this;
            let obj = {
                userId: getCookie("userid"),
                productid: this.$store.state.productId
            };
            data
                .reportchart(obj)
                .then(res => {
                    if (res.returnCode == 0) {
                        if (res.data == {}) {
                            _this.pieDatanone = true;
                        } else {
                            _this.pieDatanone = false;
                            _this.PieData.push({
                                value: res.data.negative_count,
                                name: "阴性报告数"
                            });
                            _this.PieData.push({
                                value: res.data.positive_count,
                                name: "阳性报告数"
                            });
                            _this.PieData.push({
                                value: res.data.not_out_count,
                                name: "未出报告数"
                            });
                            _this.drawPie();
                        }
                        this.isShowPieWarn = false;
                    }
                })
                .catch(error => {
                    this.isShowPieWarn = true;
                });
        },
        // 获取数据
        getStatistics(type) {
            console.log(type);
            var _this = this;
            let obj = {
                userId: getCookie("userid"),
                productId: this.$store.state.productId
            };
            data
                .getStatistics(type, obj)
                .then(res => {
                    if (res.returnCode == 0 || res.returnCode == 200) {
                        if (type == 1) {
                            if (res.data == {}) {
                                _this.barDatanone = true;
                            } else {
                                _this.barDatanone = false;
                                _this.BarData.push(res.data.sampleCount);
                                _this.BarData.push(res.data.pipelineErrorCount);
                                _this.BarData.push(res.data.annoationErrorCoun);
                                _this.drawBar();
                            }
                            this.isShowBarWarn = false;
                        }
                    }
                })
                .catch(error => {
                    if (type == 1) {
                        this.isShowBarWarn = true;
                    }
                });
        },
        //柱状图
        drawBar() {
            // 基于准备好的dom，初始化echarts实例
            this.myBarChart = this.$echarts.init(
                document.getElementById("sampleCount")
            );
            // let data=this.getStatistics(1)
            // 绘制图表
            this.myBarChart.setOption({
                tooltip: {
                    trigger: "item"
                },
                calculable: true,
                xAxis: [
                    {
                        splitLine: { show: false },
                        type: "category",
                        data: ["样本数", "运行出错数", "注释出错数"]
                    }
                ],
                yAxis: [
                    {
                        splitLine: { show: false }
                    }
                ],
                series: [
                    {
                        type: "bar",
                        barCategoryGap: "50%",
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    console.log();
                                    // build a color map as your need.
                                    var colorList = [
                                        "#B6A2DE",
                                        "#FFC799",
                                        "#D87A80",
                                        "#E87C25",
                                        "#27727B",
                                        "#FE8463",
                                        "#9BCA63",
                                        "#FAD860",
                                        "#F3A43B",
                                        "#60C0DD",
                                        "#D7504B",
                                        "#C6E579",
                                        "#F4E001",
                                        "#F0805A",
                                        "#26C0C0"
                                    ];
                                    return colorList[params.dataIndex];
                                },
                                label: {
                                    show: true,
                                    position: "top",
                                    formatter: "{b}\n{c}"
                                }
                            }
                        },
                        data: this.BarData
                    }
                ]
            });
        },
        // 饼状图
        drawPie() {
            this.myPieChart = this.$echarts.init(
                document.getElementById("reportCount")
            );
            // let data=this.getStatistics(2)
            this.myPieChart.setOption({
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    top: 10,
                    left: "left",
                    orient: "vertical",
                    data: ["阴性报告数", "阳性报告数", "未出报告数"]
                },

                series: [
                    {
                        type: "pie",
                        center: ["50%", "50%"],
                        avoidLabelOverlap: true,
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = [
                                        "#2EC7C9",
                                        "#FFC799",
                                        "#bbbbbb",
                                        "#E87C25",
                                        "#27727B",
                                        "#FE8463",
                                        "#9BCA63",
                                        "#FAD860",
                                        "#F3A43B",
                                        "#60C0DD",
                                        "#D7504B",
                                        "#C6E579",
                                        "#F4E001",
                                        "#F0805A",
                                        "#26C0C0"
                                    ];
                                    return colorList[params.dataIndex];
                                }
                            }
                        },
                        label: {
                            normal: {
                                show: true
                            }
                        },
                        labelLine: {
                            normal: {
                                show: true
                            }
                        },
                        data: this.PieData
                    }
                ]
            });
        },
        //查看分析结果
        viewResult(row) {
            let obj = {
                paientId: row.patientid, //row.patientid
                type: 6,
                userId: getCookie("userid"),
                productId: this.$store.state.productId
            };
            this.loading = true;
            data.reviewVcfAnnoation(obj).then(res => {
                console.log(res);
                if (res.returnCode == 0 || res.returnCode == 200) {
                    this.$store.state.patientid = row.patientid;
                    this.$store.state.pageindex = this.currentPage;
                    var a = document.createElement("a");
                    a.setAttribute("target", "_blank");
                    a.setAttribute(
                        "href",
                        "/rare/analyticRet2?patientId=" +
                            row.patientid +
                            "&productId=" +
                            this.$store.state.productId +
                            ""
                    );
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                } else if (res.returnCode == 605) {
                    this.$Message.success(res.msg);
                } else if (res.returnCode == 611) {
                    var _this = this;
                    this.$Modal.confirm({
                        title: "确认提示",
                        content: "<p>信息已修改，是否重新注释?</p>",
                        onOk: () => {
                            _this.uploadAnnoation(row.patientid);
                        },
                        onCancel: () => {
                            console.log(res);
                            this.$store.state.patientid = row.patientid;
                            // this.$store.state.analysisList=M.clone(res.data);
                            this.$store.state.pageindex = this.currentPage;
                            var a = document.createElement("a");
                            a.setAttribute("target", "_blank");
                            a.setAttribute(
                                "href",
                                "/rare/analyticRet2?patientId=" +
                                    row.patientid +
                                    "&productId=" +
                                    _this.$store.state.productId +
                                    ""
                            );
                            document.body.appendChild(a);
                            a.click();
                            document.body.removeChild(a);
                        }
                    });
                } else if (
                    res.returnCode == 603 ||
                    res.returnCode == 604 ||
                    res.returnCode == 607 ||
                    res.returnCode == 608
                ) {
                    this.$Message.info(res.msg);
                } else {
                    this.$Message.error(res.msg);
                }
                this.loading = false;
            });
        },
        uploadAnnoation(id) {
            let obj = {
                paientId: id, //  "45ec581ef7944f77b691251fb1374e3b"
                type: 6,
                userId: getCookie("userid"),
                productId: this.$store.state.productId
            };
            data.uploadAnnoation(obj).then(res => {
                if (res.returnCode == 0 || res.returnCode == 200) {
                    this.$Message.success(res.msg);
                }
            });
        },
        //点击解读
        unscrambleEvent(row) {
            this.$store.state.pageindex = this.currentPage;
            this.$store.state.patientid = row.patientid;
            // this.$store.state.sampleid=row.patientid;
            this.$router.push("/rare/analysis");
        },
        //新建数据
        addData(name) {
            if (name == "single") {
                this.$store.state.flag = "add";
                this.$store.state.patientid = "";
                this.$store.state.pageindex = 1;
                this.$router.push("/rare/editPatient");
            }
        },
        //查看病人
        editPatient(row) {
            console.log(row);
            this.$store.state.patientid = row.patientid;
            this.$store.state.flag = "edit";
            this.$store.state.pageindex = this.currentPage;
            this.$router.push("/rare/editPatient");
        },
        viewReport(row) {
            this.$store.state.patientid = row.patientid;
            this.$store.state.pageindex = this.currentPage;
            let obj = {
                patientid: row.patientid
            };
            this.loading = true;
            data.reportflag(obj).then(res => {
                console.log(res);
                if (res.returnCode == 706) {
                    var a = document.createElement("a");
                    a.setAttribute("target", "_blank");
                    if (res.data && this.$store.state.productId == "1") {
                        this.$store.state.reportFlag = res.data;
                        if (res.data == "阳性") {
                            a.setAttribute(
                                "href",
                                "/reportflagSon?patientid=" + row.patientid + ""
                            );

                            //this.$router.push({path:'/reportflagSon',params:obj});
                        } else if (res.data == "阴性") {
                            a.setAttribute(
                                "href",
                                "/reportflagY?patientid=" + row.patientid + ""
                            );
                            //this.$router.push('/reportflagY');
                        }
                    } else if (res.data && this.$store.state.productId == "2") {
                        this.$store.state.reportFlag = res.data;
                        if (res.data == "阳性") {
                            a.setAttribute(
                                "href",
                                "/tumorSon?patientid=" + row.patientid + ""
                            );
                            // this.$router.push('/tumorSon');
                        } else if (res.data == "阴性") {
                            a.setAttribute(
                                "href",
                                "/tumorY?patientid=" + row.patientid + ""
                            );
                            //this.$router.push('/tumorY');
                        }
                    }
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                } else {
                    this.$Message.error(res.msg);
                }
                this.loading = false;
            });
        },

        //新建数据
        getRareList() {
            let obj = {
                userId: getCookie("userid"),
                productId: this.$store.state.productId,
                pageIndex: this.currentPage,
                pageSize: this.pageSize
            };
            this.loading = true;
            if (this.searchColumn != "" && this.searchColumn != "all") {
                if (this.searchColumn == "patientcode") {
                    obj.patientCode = this.keywords;
                    obj.sampleCode = "";
                } else if (this.searchColumn == "samplecode") {
                    obj.patientCode = "";
                    obj.sampleCode = this.keywords;
                }
            }
            data
                .getHome(obj)
                .then(data => {
                    if (data && data.returnCode == 200) {
                        this.getLabelWidth(data.data.patientModelList);
                        this.rareList = data.data.patientModelList;
                        this.sampleCount = data.data.sampleCount;
                        this.total = data.data.totalCount;
                        this.loading = false;
                    } else {
                        this.$Message.error(data.msg);
                        this.loading = false;
                    }
                    this.isWarn = false;
                    if (this.rareList == null || this.rareList.length == 0) {
                        this.emptyShow = true;
                    } else {
                        this.emptyShow = false;
                    }
                })
                .catch(error => {
                    this.isWarn = true;
                    this.loading = false;
                });
        },
        //设置文件状态
        setStatusClass(status) {
            if (status == 1) {
                return "upCompelte posBg"; //上传完成
            } else if (status == 2) {
                return "anyLaoding posBg"; //分析中
            } else if (status == 3) {
                return "anySuccess posBg"; //分析完成
            } else if (status == 4) {
                return "anyFail posBg"; //分析失败
            } else {
                return "posBg";
            }
        },
        //设置文件标题
        setTitle(status) {
            if (status == 1) {
                return "分析等待中";
            } else if (status == 2) {
                return "分析中";
            } else if (status == 3) {
                return "分析成功";
            } else if (status == 4) {
                return "分析失败";
            } else {
                return "";
            }
        },
        //判断是否显示解读
        unscramble(list) {
            var ret = false;
            if (list != null) {
                for (var i = 0; i < list.length; i++) {
                    if (
                        list[i].vcfjob == 5 ||
                        list[i].cnvjob == 5 ||
                        list[i].svjob == 5
                    ) {
                        ret = true;
                        break;
                    }
                }
            }
            return ret;
        },
        handleSizeChange(size) {
            this.pageSize = size;
            this.$store.state.pageSize = size;
            this.getRareList();
        },
        handleCurrentChange(page) {
            this.currentPage = page;
            this.getRareList();
        },
        //获取文件状态一栏宽度
        getLabelWidth(list) {
            var maxList = [];
            for (var i = 0; i < list.length; i++) {
                var max = this.getSampListMax(list[i].sampleModelList);
                maxList.push(max);
            }
            var newMaxList = maxList.sort(function(x, y) {
                return y - x;
            });
            if (newMaxList.length > 0) {
                this.labelWidth = this.doSetLabelWidth(newMaxList[0]);
            }
        },
        //获取每一行里面最大的
        getSampListMax(list) {
            var m = 0;
            var maxList = [];
            if (typeof list == "object" && list.length > 0) {
                for (var i = 0; i < list.length; i++) {
                    var max = 0;
                    if (list[i].fastqjob && list[i].fastqjob > 0) {
                        max++;
                    }
                    if (list[i].bamjob && list[i].bamjob > 0) {
                        max++;
                    }
                    if (list[i].vcfjob && list[i].vcfjob > 0) {
                        max++;
                    }
                    if (list[i].cnvjob && list[i].cnvjob > 0) {
                        max++;
                    }
                    if (list[i].svjob && list[i].svjob > 0) {
                        max++;
                    }
                    maxList.push(max);
                }
            }
            var newArr = maxList.sort(function(x, y) {
                return y - x;
            });
            if (newArr.length > 0) {
                return newArr[0];
            }
            return m;
        },
        doSetLabelWidth(num) {
            var ret = 60;
            switch (num) {
                case 0:
                    ret = 60;
                    break;
                case 1:
                    ret = 60;
                    break;
                case 2:
                    ret = 100;
                    break;
                case 3:
                    ret = 140;
                    break;
                case 4:
                    ret = 180;
                    break;
                case 5:
                    ret = 220;
                    break;
                default:
                    ret = 60;
                    break;
            }
            return ret;
        },
        search() {
            // switch (val) {
            //   case 'patientcode':
            //     this.searchColumn = "1";
            //     break;
            //   case 'samplecode':
            //     this.searchColumn = "2";
            //     break;
            // }
            this.pageIndex = 1;
            this.currentPage = 1;
            this.keywords = this.keyword;
            this.getRareList();
        },
        //获取查询字段
        getSearchColumn(val) {
            this.keyword = "";
            this.keywords = "";
            this.searchColumn = val;
            // switch (val) {
            //   case 'patientcode':
            //     this.searchColumn = "1";
            //     break;
            //   case 'samplecode':
            //     this.searchColumn = "2";
            //     break;
            // }
        }
    },
    created() {
        console.log(this.$store.state.productId);
        var _this = this;
        this.pageSize = this.$store.state.pageSize;
        this.currentPage = this.$store.state.pageindex;
        this.getRareList();
        this.getStatistics(1);
        this.reportchart();
        window.onresize = function() {
            _this.myPieChart.resize();
            _this.myBarChart.resize();
        };
    }
};
</script>